<!-- SPIFFS Modal -->
<div id="SPIFFSdlg.html" class="modal">
  <!-- SPIFFS content -->
  <div class="modal-content">
    <div class="modal-header">
	  <span class="close" onclick="closeSPIFFSDialog('cancel')"><b>&times;</b></span>
      <h3><div class="modal-title" translate>ESP3D Filesystem</div></h3>
    </div>
    <div class="modal-body">
      <div class="panel" id="SPIFFS">
    <div class="panel-body">
        <table>
            <tr>
                <td><input type="file" id="SPIFFS-select" name="myfiles[]" multiple onchange="checkSPIFFSfiles()" /></td>
                 <td>&nbsp;</td>
                <td><button class="btn btn-primary" type="button" id="SPIFFS_uploadbtn" onclick="SPIFFS_UploadFile();"  translate >Upload</button></td>
                <td><progress style='display:none;' name='prg' id='SPIFFS_prg' max='100'></progress></td>
                <td>&nbsp;</td>
                <td><span id='uploadSPIFFSmsg' style='display:none;' translate>Uploading</span></td>
            </tr>
        </table>
        <br><br>
        <div class="panel">
            <div class="panel-body">
                <table>
                    <tr>
                        <td width="0%">
                            <button onclick="SPIFFS_Createdir()" class="btn btn-info" style="padding: 5px 8px 0px 8px;">
                                <svg width="2em" height="2em" viewBox="0 0 40 40">
                                    <rect x="5" y="10" width="30" height="20" rx="2" ry="2" fill="currentColor" />
                                    <rect x="20" y="5" width="15" height="15" rx="2" ry="2" fill="currentColor" />
                                    <text x="15" y="25" font-size="18"  font-weight="800"  fill="#5BC0DE">+</text>
                                </svg>
                            </button>
                        </td>
                        <td>
                            <div id="SPIFFS_loader" class="loader"></div>
                        </td>
                        <td width="100%">
                            <div id="SPIFFS_path" class="info" >&nbsp;</div>
                        </td>
                    </tr>
                </table>
                <table class="table table-striped" style="border:1px;solid #dddddd;margin-bottom:20px;" >
                    <thead>
                        <tr>
                            <th width='0%' translate>Type</th>
                            <th width='100%' translate>Name</th>
                            <th translate>Size</th>
                            <th width='0%'></th>
                        </tr>
                    </thead>
                    <tbody id="SPIFFS_file_list"></tbody>
                </table>
            </div>
            <div class="panel-footer" id="SPIFFS_status"></div>
        </div>
    </div>
</div>
      
      
    </div>
    <div class="modal-footer">
	  <span class="pull-right"> 
        <button class="btn btn-warning" onclick="closeSPIFFSDialog('cancel') " translate>Close</button>
      </span>
      <span class="pull-right"> 
        &nbsp;&nbsp;
      </span>
      <span class="pull-right"> 
		<button class="btn btn-primary" id="refreshSPIFFSbtn" onclick="refreshSPIFFS() ">
            <svg width="1.3em" height="1.2em" viewBox="0 0 1300 1200">
                <g transform="translate(50,1200) scale(1, -1)">
                    <path  fill="currentColor" d="M947 1060l135 135q7 7 12.5 5t5.5 -13v-361q0 -11 -7.5 -18.5t-18.5 -7.5h-361q-11 0 -13 5.5t5 12.5l134 134q-110 75 -239 75q-116 0 -214.5 -57t-155.5 -155.5t-57 -214.5h-150q0 117 45.5 224t123 184.5t184.5 123t224 45.5q192 0 347 -117zM1027 600h150 q0 -117 -45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5q-192 0 -348 118l-134 -134q-7 -8 -12.5 -5.5t-5.5 12.5v360q0 11 7.5 18.5t18.5 7.5h360q10 0 12.5 -5.5t-5.5 -12.5l-133 -133q110 -76 240 -76q116 0 214.5 57t155.5 155.5t57 214.5z" />
                </g>
            </svg>
        </button>
	  </span>
    </div>
  </div>
  <!-- /SPIFFS content -->
</div>
<!-- /SPIFFS Modal -->
